<template>
  <!-- 发货单页面-->
  <div>
   
      <Herd>
       
      </Herd>
    <!-- 搜索框 -->
 <van-search
  v-model="value"
  show-action
  label="地址"
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>
    <!-- "全部","代发货","待收货","待评价"列表 -->
    <van-grid>
  <van-grid-item    v-for="(item,index) in gridList" :text="item" :key="index" :class="gir==index ? 'girp' :'' " v-model="gir" @click="itemGir(index)"/>
</van-grid>
<!-- 商品描述 -->
<div v-for="(item,index) in Records" :key="index">
  <van-action-sheet v-model="show" :actions="actions" @select="onSelect(item.serialNo)"/>
<van-cell is-link @click="showPopup(item.serialNo)">商品描述</van-cell>
<van-card
  :desc="item.orderTime"
  :title="item.title"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="danger">下单人:{{item.orderUserName}}</van-tag>
  </template>
  <template #footer>
    <!-- {{item.status==0?'发货':'评价'}} -->
    <van-button size="mini" @click="PrsonFa(item.status,item.serialNo)" ref="btn" v-if="item.status==0">发货</van-button>
     <van-button size="mini" @click="PrsonFa(item.status,item.serialNo)" ref="btn" v-if="item.status==10">收货</van-button>
      <van-button size="mini" @click="PrsonFa(item.status,item.serialNo)" ref="btn" v-if="item.status==20" color="#ffcc33">评价</van-button>
       <van-button size="mini" @click="PrsonFa(item.status,item.serialNo)" ref="btn"  v-if="item.status==30"  text="查看评价"></van-button>
  </template>
</van-card>

</div>


  </div>
</template>
<script>
import { Toast } from "vant";
import Herd from "@/components/发货单/Herd"
import {GetDeliverDate,GetAllDate,GetShouDate,GetConfirmReceipttDate,GetListDate} from "@/request/api"
export default {
  name:"Deliver",
  data() {
    return {
      value: "",//搜索框输出的内容
      gridList:["全部","待发货","待收货","待评价"],//渲染列表数据局
      gir:0,//控制样式
      show: false,
      /* 发货列表数据信息 */
      Records:[],
      day:"",
       show: false,
      actions: [{ name: '取消' }, { name: '确认收货' ,color: 'green'}],
    };
  },
  computed:{
    Fenlei:{
      get(){
      console.log("进入")
      this.Records.forEach((item)=>{
         switch (item.status) {
    case 0:
       this.day = "发货";
       console.log(this.day);
        return;
    case 10:
        this.day = "收货";
         console.log(this.day);
          return;
     case 20:
       this.day = "待评价";
        console.log(this.day);
         return;
    case 30:
       this.day = "已评价";
        console.log(this.day);
          return;
} 
      })
   

      },
      set(){

      }
    }
  },
  
  components:{
      Herd
  },
  methods: {
    fenlei(){
      this.Records.map((item)=>{
         switch (item.status) {
    case '0':
       this.day = "发货";
       console.log(this.day);
        return;
    case '10':
        this.day = "收货";
         console.log(this.day);
          return;
     case '20':
       this.day = "待评价";
        console.log(this.day);
         return;
    case '30':
       this.day = "已评价";
        console.log(this.day);
          return;
} 
      })
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
     console.log(item);
      if(item){
        GetConfirmReceipttDate(item).then((res)=>{
          console.log("确认收货数据:",res);
        })
      }
      Toast(item.name);
    },
    /* 点击跳转到个人信息页面 */
    PrsonFa(val,serialNo){
      console.log(666);
     
        this.fenlei()
      if(val==0){
       
        //渲染发货详情，将订单号通过URL带过去
       this.$router.push(`/thorough/${serialNo}`)
      }
      if(val==10){
         this.show = true;
        // Toast(item.name);
      }
      if(val==20){
  this.$router.push(`/pingfen/${serialNo}`)
      }
       if(val==30){
  this.$router.push(`/discuss/${serialNo}`)
      }
    },
    itemGir(val){
        this.gir=val
        console.log(val);
        if(val==1){
       GetDeliverDate({current:"1",size:"20",keyword:''}).then((res)=>{
      /* 代发货单的数据 */
      this.Records=res.data.data.records
      console.log("666666",this.Records);
    
      console.log("代发货的接口数据:",res);
    })
        }
        if(val==0){
            GetAllDate({current:"1",size:"20",keyword:''}).then((res)=>{
this.Records=res.data.data.records;
console.log("666666",this.Records);
console.log("代发货的接口数据:",res);
    })
        }
        if(val==2){
    GetShouDate({current:"1",size:"20",keyword:''}).then((res)=>{
this.Records=res.data.data.records;
console.log("666666",this.Records);
console.log("代收货的接口数据:",res);
    })
        }
          if(val==3){
             GetListDate({current:"1",size:"20",keyword:''}).then((res)=>{
this.Records=res.data.data.records;
  //
console.log("666666",this.Records);
console.log("代评价的接口数据:",res);
          })
          }
    },
    onSearch(val) {
       GetAllDate({current:"1",size:"40",keyword:this.value}).then((res)=>{
this.Records=res.data.data.records;
console.log("666666",this.Records);
console.log("发货单查询:",res);
    })
      // Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
      showPopup(val) {
        console.log(val);
      this.$router.push(`/Shangpingxiangqing/${val}`)
      // this.show = true;
    },
  },
  
  created(){
   
     /* 全部订单的数据 */
    GetAllDate({current:"1",size:"40",keyword:''}).then((res)=>{
this.Records=res.data.data.records;
console.log("666666",this.Records);
console.log("代发货的接口数据:",res);
    })
  }
};
</script>

<style lang="less" scoped>
.van-action-sheet__conten{
  display: flex!important;
}
.girp{
    border-bottom: 2px solid orange;
}
.van-card__content{
    text-align: left;
 
   
}
 


.van-card__desc{
    margin: .15rem 0;
}
.van-card__header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  
    /* border: 1px solid; */
    border-bottom: 1px dashed #5555;
}
.van-card__footer {
 display: block; 
    width: 4.8rem;
    text-align: center;
    border-radius: 1.25rem;
    left: 16.5rem;
    color: white;
    font-weight: bold;
    .van-button--mini {
    display: inline-block;
    width: 1rem;
    padding: 0 4px;
    font-size: 10px;
    background: #003399;
    color: white;
    border-radius: 0.1rem;
    margin: .08rem 0;

}
.van-button[data-v-7f2c9135] {
    display: inline-block;
    width: 1rem;
    padding: 0 4px;
    font-size: 10px;
    background: #003399;
    color: white;
    border-radius: 0.1rem;
    margin: 0.08rem 0;
}
}

</style>
